<template>
    <popup ref="popupRef" :title="popupTitle" width="500px" @confirm="handleConfirm" :async="true" @close="popupClose">
        <div class="pr-8">
			<div>请认真核对银行流水，并填写支付信息</div>
			<br />
            <el-form ref="formRef" :model="formData" label-width="100px" :rules="formRules">
				<el-form-item label="支付户名" prop="send_pay_name">
					<el-input v-model="formData.send_pay_name" placeholder="请输入"></el-input>
				</el-form-item>
				<el-form-item label="支付账号" prop="send_pay_account">
					<el-input v-model="formData.send_pay_account" placeholder="请输入"></el-input>
				</el-form-item>
				<el-form-item label="支付时间" prop="pay_time">
					<el-date-picker v-model="formData.pay_time" type="date" placeholder="年/月/日" format="YYYY-MM-DD" value-format="YYYY-MM-DD"></el-date-picker>
				</el-form-item>
            </el-form>
        </div>
    </popup>
</template>
<script lang="ts" setup>
	import Popup from '@/components/popup/index.vue'
	import type { FormInstance, FormRules } from 'element-plus'
	import feedback from '@/utils/feedback'
	const formRef = shallowRef<FormInstance>()
	// import { ElDatePicker } from 'element-plus';
	const props = defineProps({
		show: {
			type: Boolean,
			required: true
		},
		// value: {
		// 	type: [Number, String],
		// 	required: true
		// }
	})

	const emit = defineEmits<{
		(event: 'update:show', value: boolean): void
		(event: 'confirm', value: any): void
	}>()

	const popupTitle = computed(() => {
		return `已到账`
	})

	const formData = reactive({
		send_pay_name: '',
		send_pay_account: '',
		pay_time: ''
	})
	
	const popupRef = shallowRef<InstanceType<typeof Popup>>()

	const formRules: FormRules = {
		send_pay_name: [
			{
				required: true,
				message: '请输入支付户名'
			}
		],
		send_pay_account: [
			{
				required: true,
				message: '请输入支付账号'
			}
		],
		pay_time: [
			{
				required: true,
				message: '请选择支付时间'
			}
		],
	}

	const handleConfirm = async () => {
		await formRef.value?.validate()
		emit('confirm', {send_pay_name:formData.send_pay_name,send_pay_account:formData.send_pay_account,pay_time:formData.pay_time})
	}

	const popupClose = () => {
		emit('update:show', false)
		formRef.value?.resetFields()
	}

	watch(
		() => props.show,
		(val) => {
			if (val) {
				popupRef.value?.open()
			} else {
				popupRef.value?.close()
			}
		}
	)
</script>
